<template>
  <div class="content">
    <div class="back" @click="goBack">返回</div>
    <van-tabs class="topBar" v-model="active" color="#000">
      <!-- <div class="sectionBox">
        <span class="cohensive">综合</span> <span class="money">价格</span>
      </div> -->
      <van-tab title="手游必备">手游必备</van-tab>
      <van-tab title="充电必备">充电必备</van-tab>
      <van-tab title="数据线">数据线</van-tab>
      <van-tab title="有线耳机">有线耳机</van-tab>
      <van-tab title="保护壳">保护壳</van-tab>
      <van-tab title="移动电源">移动电源</van-tab>
      <van-tab class="findN" title="OPPO Find N 系列">
        <ul>
          <li class="findN-item" v-for="li in findN" :key="li.categoryCode">
            <img :src="li.mainImg" alt="" />
            <div class="right">
              <span class="title" >{{ li.spuName }}</span>
              <span class="subtitle">{{ li.marketingText }}</span>
              <!-- <div class="tag"><span>{{ li.promotionsList. descList[0]}}</span></div> -->
              <span class="price">{{ li.price.pricePrefix }}￥{{ li.price.price }}this.$router.push({path:'',query:{key:'',}})</span>
            </div>
          </li>
        </ul>
      </van-tab>
      <van-tab title="OPPO Find X 系列">OPPO Find X 系列</van-tab>
      <van-tab title="OPPO Reno 系列">OPPO Reno 系列</van-tab>
      <van-tab title="OPPO K 系列">OPPO K 系列</van-tab>
      <van-tab title="OPPO A 系列">OPPO A 系列</van-tab>
      <van-tab title="OPPO平板">OPPO平板</van-tab>
      <van-tab title="OPPO智能耳机">OPPO智能耳机</van-tab>
      <van-tab title="OPPO智能穿戴">OPPO智能穿戴</van-tab>
      <van-tab title="OPPO智能电视">OPPO智能电视</van-tab>
      <van-tab title="OPPO原装配件">OPPO原装配件</van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Vue from "vue";
import { Tab, Tabs } from "vant";

Vue.use(Tab);
Vue.use(Tabs);
export default {
  data() {
    return {
      active: 6,
      findN: [],
      findN2: [],
      findN3: [],
    };
  },
  methods: {
    goBack: function () {
      this.$router.push("/home");
    },
    //  this.moment( 时间戳 ).format("YYYY-MM-DD HH:mm:ss")
  },
  created() {
    this.$axios
      .get(
        "/cn/oapi/goods-business/category/goods?scene=mall&categoryCode=002534&pageIndex=1&pageSize=10"
      )
      .then((res) => {
        console.log("res ==>", res);
        this.findN = res.data;
        this.findN2 = this.findN[0].title;
        console.log("OPPO Find N 系列数据列表：", this.findN);
        console.log("OPPO Find N 系列详细数据: ", this.findN2);
      });
  },
};
</script>

<style lang="scss" scoped>
.content {
  .back {
    margin-left: -7.5rem;
    margin-top: 0.3rem;
    padding-bottom: 0.5rem;
    font-size: 0.4rem;
    cursor: pointer;
    transition: opacity 0.34s cubic-bezier(0, 0, 0.2, 1) 0s;
    border-bottom: 1px solid gainsboro;
  }
  .topBar {
    // margin: 0 0.5rem;
    overflow: hidden;
    background-color: whitesmoke;
    height: 25rem;
    // .sectionBox {
    //   height: 0.42rem;
    //   float: left;
    //   margin-left: 0.5rem;
    //   .cohensive {
    //     font-weight: bold;
    //     font-size: 0.12rem;
    //   }
    //   .money {
    //     font-size: 0.12rem;
    //     color: rgba(0, 0, 0, 0.55);
    //   }
    // }
    .findN {
      width: 350px;
      height: 200px;
      margin-top: 0.5rem;
      margin-left: 0.35rem;
      background-color: #fff;
      img {
        float: left;
        width: 125px;
        height: 125px;
      }
      .right {
        width: 210px;
        height: 130px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        .title {
          font-size: 15px;
        }
        .subtitle {
          font-size: 12px;
          color: gray;
        }
        .price {
          font-size: 22px;
          color: #f34141;
        }
      }
    }
  }
}
</style>